Introduction to Visual Imagemapper

Introduction

Welcome to Visual Imagemapper 3.0, also known as VIM. Vim are created by Sofasitters Entertainment and is an image map utility.

Vim are used to create clickable images that you can use on your web pages. A clickable image can contains three different figures, rectangles, circles and polygons, this figures are also known as a hotspot. When a visitor click on of the hotspots they will be directed to the hyperlink associated with the hotspot..

In VIM both amateurs and professionals can create advanced image maps, this can be done by using the wysiwyg editor, and the generated code can be edited in the internal text editor or copied to an external editor.


Visual Imagemapper Features
Here are some of the features that you can find in Visual Imagemapper.
  • It's possible to load and save into an already existing image map.
  • The figures can be edited both in wysiwyg mode and text mode.
  • It is possible to rotate polygons and rectangles.
  • You can preview the document in both internal and external browser.
  • Set different color on each figure, this make it easier to work on document with many figures.
  • Lock figures so it can't be moved or deleted by accident.
  • Undo and Redo figure events in wysiwyg mode.
  • Possible to change figure type after the figure has been drawned to the document.
  • Zoom to working document, from 25% to 500%.
  • If saving the document as MAP, you could chose between CERN og NCSA file format.
  • When opening an html document, every picture in the file can be opened and worked with.
  • Multiple maps can be opened and worked with.
  • Copy and Paste figures between all working documents.
  • Cool interface
  • Support both GIF and JPEG images.
  • You can copy the MAP code directly to the clipboard without saving it to an file first.
  • You can manually edit the hotspots coordinates, this give you the possibility to place an figure exactly where you want.


Purchase Visual Imagemapper
Evaluation
This evaluation of Visual Imagemapper will function without any restrictions for 30 days, after 30 days the program will stop working, and you are given the option to either purchase the full program or uninstall it.
Why purchase
By registering the program you won't have any kind of restrictions, the registration is a one time payment, and gives you the right to use future versions of Visual Imagemapper. All advantages of register the product can you find on the Visual Imagemapper purchase page.

Click here to goto the Visual Imagemapper purchase page.


Registering Visual Imagemapper
When you have purchased Visual Imagemapper, perform the following steps to activate the application.
  1. Start Visual Imagemapper and click Help in the file menu, then click the About button.
  2. Click the Register button in the appearing help dialog.
  3. Enter your Name, Email and serial number into the text fields.
  4. Click the OK button to complete the registration

The next time you start Visual Imagemapper it will be registered.


Feedback and Bugs

Give us Feedback
If you wish to suggest new features to this product, you may send feedback to us from our Visual Imagemapper Feedback pages. They are located at http://www.sofasitters.net/feedback.asp . We are always interested in hearing other people's opinions and suggestions to changes. Even if not all requests can be added to the program, we will evaluate all the information we get. Maybe a feature you suggest will be added.
If you have found any bug, they could be reported by clicking here


License Agreements
YOU SHOULD CAREFULLY READ THE FOLLOWING TERMS AND CONDITIONS BEFORE USING THIS PRODUCT. IT CONTAINS SOFTWARE, THE USE OF WHICH IS LICENSED BY SOFASITTERS ENTERTAINMENT,, TO ITS CUSTOMERS FOR THEIR USE ONLY AS SET FORTH BELOW. IF YOU DO NOT AGREE TO THE TERMS AND CONDITIONS OF THIS AGREEMENT, DO NOT USE THE SOFTWARE. USING ANY PART OF THE SOFTWARE INDICATES THAT YOU ACCEPT THESE TERMS.

GRANT OF LICENSE:
SOFASITTERS ENTERTAINMENT. (the "Licensor") grants to you this personal, limited, non-exclusive, non-transferable, non-assignable license solely to use in a single copy of the Licensed Works on a single computer for use by a single concurrent user only, and solely provided that you adhere to all of the terms and conditions of this Agreement. The foregoing is an express limited use license and not an assignment, sale, or other transfer of the Licensed Works or any Intellectual Property Rights of Licensor.

ASSENT:
By opening the file package containing this software, you agree that this Agreement is a legally binding and valid contract, agree to abide by the intellectual property laws and all of the terms and conditions of this Agreement, and further agree to take all necessary steps to ensure that the terms and conditions of this Agreement are not violated by any person or entity under your control or in your service.

OWNERSHIP OF SOFTWARE:
The Licensor own certain rights that may exist from time to time in this or any other jurisdiction, whether foreign or domestic, under patent law, copyright law, publicity rights law, moral rights law, trade secret law, trademark law, unfair competition law or other similar protections, regardless of whether or not such rights or protections are registered or perfected (the "Intellectual Property Rights"), in the computer software and hardware, together with any related documentation (including design, systems and user) and other materials for use in connection with such computer software in this package (collectively, the "Licensed Works"). ALL INTELLECTUAL PROPERTY RIGHTS IN AND TO THE LICENSED WORKS ARE AND SHALL REMAIN IN LICENSOR.

RESTRICTIONS:
(a) You are expressly prohibited from copying, modifying, merging, selling, leasing, redistributing, assigning, or transferring in any matter, Licensed Works or any portion thereof.

(b) You may take a single copy of materials within the package or otherwise related to Licensed Works only as required for backup purposes.

(c) You are also expressly prohibited from reverse engineering, decompiling, translating, disassembling, deciphering, decrypting, or otherwise attempting to discover the source code of the Licensed Works as the Licensed Works contain proprietary material of Licensor. You may not otherwise modify, alter, adapt, port, or merge the Licensed Works.

(d) You may not remove, alter, deface, overprint or otherwise obscure Licensor patent, trademark, service mark or copyright notices.

(e) You agree that the Licensed Works will not be shipped, transferred or exported into any other country, or used in any manner prohibited by any government agency or any export laws, restrictions or regulations.

(f) You may not publish or distribute in any form of electronic or printed communication the materials within or otherwise related to Licensed Works, including but not limited to the object code, documentation, help files, examples, and benchmarks.

DISTRIBUTION:
The trial version of this software may be distributed freely through on-line services, bulletin boards, or other forms of electronic media, as long as the files are distributed in their entirety. Computer Magazines/Archives are authorized to distribute the Evaluation Version on any Cover Disk or CD-ROM without an individual permission.

TERM:
This Agreement is effective until terminated. You may terminate this Agreement at any time by uninstalling the Licensed Works and destroying all copies of the Licensed Works. Upon any termination, you agree to uninstall the Licensed Works and return or destroy all copies of the Licensed Works, any accompanying documentation, and all other associated materials.

WARRANTIES AND DISCLAIMER:
EXCEPT AS EXPRESSLY PROVIDED OTHERWISE IN A WRITTEN AGREEMENT BETWEEN LICENSOR AND YOU, THE LICENSED WORKS ARE NOW PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE, OR THE WARRANTY OF NON-INFRINGEMENT. WITHOUT LIMITING THE FOREGOING, LICENSOR MAKES NO WARRANTY THAT (i) THE LICENSED WORKS WILL MEET YOUR REQUIREMENTS, (ii) THE USE OF THE LICENSED WORKS WILL BE UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE, (iii) THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE LICENSED WORKS WILL BE ACCURATE OR RELIABLE, (iv) THE QUALITY OF THE LICENSED WORKS WILL MEET YOUR EXPECTATIONS, (v) ANY ERRORS IN THE LICENSED WORKS WILLBE CORRECTED, AND/OR (vi) YOU MAY USE, PRACTICE, EXECUTE, OR ACCESS THE LICENSED WORKS WITHOUT VIOLATING THE INTELLECTUAL PROPERTY RIGHTS OF OTHERS. SOME STATES OR JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES OR LIMITATIONS ON HOW LONG AN IMPLIED WARRANTY MAY LAST, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU. IF TEXAS LAW IS NOT HELD TO APPLY TO THIS AGREEMENT FOR ANY REASON, THEN IN JURISDICTIONS WHERE WARRANTIES, GUARANTEES,REPRESENTATIONS, AND/OR CONDITIONS OF ANY TYPE MAY NOT BE DISCLAIMED, ANY SUCH WARRANTY, GUARANTEE, REPRESENATION AND/OR WARRANTY IS: (1) HEREBY LIMITED TO THE PERIOD OF EITHER (A) THIRTY (30) DAYS FROM THE DATE OF OPENING THE PACKAGE CONTAINING THE LICENSED WORKS OR (B) THE SHORTEST PERIOD ALLOWED BY LAW IN THE APPLICABLE JURISDICTION IF A THIRTY (30) DAY LIMITATION WOULD BE UNENFORCEABLE; AND (2) LICENSORÕS SOLE LIABILITY FOR ANY BREACH OF ANY SUCH WARRANTY, GUARANTEE, REPRESENTATION, AND/OR CONDITION SHALL BE TO PROVIDE YOU WITH A NEW COPY OF THE LICENSED WORKS.

IN NO EVENT SHALL LICENSOR OR ITS SUPPLIERS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY SPECIAL, INCIDENTAL, INDIRECT OR CONSEQUENTIAL DAMAGES OF ANY KIND, OR ANY DAMAGES WHATSOEVER, INCLUDING, WITHOUT LIMITATION, THOSE RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER OR NOT LICENSOR HAD BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, AND ON ANY THEORY OF LIABILITY, ARISING OUT OF OR IN CONNECTION WITH THE USE OF THE LICENSED WORKS. SOME JURISDICTIONS PROHIBIT THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU. THESE LIMITATIONS SHALL APPLY NOTWITHSTANDING ANY FAILURE OF ESSENTIAL PURPOSE OF ANY LIMITED REMEDY.

SEVERABILITY:
In the event any provision of this License Agreement is found to be invalid, illegal or unenforceable, the validity, legality and enforceability of any of the remaining provisions shall not in any way be affected or impaired and a valid, legal and enforceable provision of similar intent and economic impact shall be substituted therefor.

ENTIRE AGREEMENT:
This License Agreement sets forth the entire understanding and agreement between you and Sofasitters Entertainment., supersedes all prior agreements, whether written or oral, with respect to the Software, and may be amended only in a writing signed by both parties.

Sofasitters Entertainment
http://www.sofasitters.com


Revisions

Visual Imagemapper Revisions
Here can you find the development history for Visual Imagemapper. This history starts at the first public beta, released March 29 2004.
Visual Imagemapper 3.0.241 Released May 20. 2004
ADD | Added a new Hotspot Wizard icon to the toolbar.
FIX | Fixed an bug in the view html code control.
FIX | Fixed some small bug in the internal html validator
FIX | When fail to open a VIP file, the program stops working.
FIX | When saving a new html document. If you change the USEMAP name and save again, the application stop working
Visual Imagemapper 3.0.240 Released May 12. 2004
FIX | Removed plenty of unused variables.
ADD | Added support for Cool Cursor.
ADD | Added a new Hotspot Wizard
CHANGE | Changed the text Figure to Hotspot
FIX | Some small bugs


Create a new image map
Creating an new image map can either be done through the menu bar or through the toolbar. If you want to start a new from the file menu just click the File > New . If you want to start a new map from the toolbar, click the [image] button.

Then a file dialog box will appear. Here you could select the image that should be used in the document. Select the image and click the OK button. The image will then load and you are ready to start designing your image map.


Create a new hotspot
When you want to add some clickable regions on the image you have to create a new hotspot. You can select between three different hotspots. You could add an circular, rectangular or polygon figure. This hotspots can all be accesses through the toolbar.
1. | Select the figure from the toolbar that you want to create.
2. | Place your mouse cursor over the image, click the right button to start drawing. Move your mouse to opposite corner and release the mouse button to end drawing. When you are using the polygon tool, click the right button, release the button. Move the pointer to the new location and repeat the procedure. Click the right button to end. An polygon must at least have 3 points to work.
3. | Enter the Properties pane and enter the following information.
 | Alt | This will be the tool tip when the user moves the pointer over the area.
 | Href | Here you enter the url where the user should be directed to when clicking this area.
 | Target | The frame the clicked link will be directed to. Leave this blank if not using frames.
4. | Repeat step 1 to 3 to add more hotspot to your page.


Rotate an shape
If you want to rotate an rectangle or an polygon just click the rotate button [image] , this button can only be found in the Toolbar.
How to rotate an figure
1. | Select the shape you want to rotate. There is not possible to select circles and locked shapes.
2. | Click the Rotate button that can be found in the Toolbar.
3. | Click on the image, do not release the mouse button.
4. | Move the mouse to left and right, the shape will now rotate.
5. | Release the mouse button to end rotating.
If you regret the rotation you have to use the undo button to set the figure back to the last state. If you rotate an rectangle, the rectangle will automatic change it shape style to polygon. On the right bottom of the screen [image] you could see how many degrees you have rotated the shape.


Preview an image map
To preview an image map can be done two ways in Visual Imagemapper. You can either view it in your favorite web browser or you can use the internal preview in Visual Imagemapper.
1. Using the External Preview.
You can either click the Preview button in the toolbar [image] or you can from the Menu bar click the Preview button, this can be found under the File menu.
2. Using the Internal preview.
When you want to view your image map in the internal browser you can click the Preview button, [image] found on the document tab LINK. In the internal preview you can click an hotspot and your standard browser will be activated. The internal will also display the ALT tool tip, but such things as JavaScript etc will not be displayed.


Save your image map
You may save your imagemap for later access. When saving in VIM you could choose between three different file formats. By clicking here you could find an description on each file format. You can access the save function from either the file menu or from the toolbar. On the file bar click File > Save, and from the toolbar click the Save button [image].
By clicking the Save button from the toolbar, or by clicking the File > Save the active file will be overwritten. If the file not have been saved before or you click the Save As choice from the File menu, you are allowed to save the file with a different filename or in a different file format.


Open an existing imagemap
If you want to open an existing imagemap or an html file, select File> Open. You can also click the open button in the toolbar. In the Open dialog box that appear, select the file and click the OK button. You are now ready to begin change/edit the current imagemap. Click here to learn how to create a new hotspot .


Select Image Source
When opening an html file, contains more than one image or imagemap the Select Image Source dialog will appear. Here could you select what image to use when creating your imagemap. You could also open existing image maps from the document. This dialog could contain a large list of items.

Items with this image [image] are clear images that you could load and start a new image map on. Items with this picture [image] are already existing image maps in the current document. Select the item you want and click the OK button to load it.


Multiple Imagemaps

Multiple Maps
When you open an html file, it could contains more than one imagemap. If the file do that the multiple maps dialog box will appear. There are two types of items that can be listed here.
 | This are already existing image maps in the loaded file
 | This are pictures that you could create image maps of.
Select the image map/picture you want work with and click the OK button.


Supported File Format

Supported File Formats
Visual Imagemapper can handle many different file formats, here is an brief description on each file format.
File Format | Description
VIP | This is a Visual Imagemapper's working file.
HTML/HTM | This is a hypertext document, most of the web pages are saved in this format.
MAP | The MAP format is designed for server-side maps. Should only be used by professionals.


Hotspot Wizard
With this wizard you can generate many hotspots pretty fast. If you want to create clickable map based on thumbnail images, this tool is a must. You can of course create it the old-fashioned way, but this wizard can save you a lot of time if you're creating lots of hotspots.
With this Wizard you choose how many fields you want horizontally and vertically. The Hotspot Wizard can create hundred and hundred of hotspots. Generating many hotspots will take time if you have a slow computer.
When you enter default values of the different attributes (step 3), there are some built-in functions that you may use. These functions are:
%INDEX% assigns an index number to the picture.
%NAME% returns the name of the hotspot in question
To use these functions, write e.g. picture&INDEX&.gif - the %INDEX% will be replaced by numbers.
In Step 2 you could set the first counting Index, the standard are 1.
All values at Step 2 will be saved when closing the Hotspot Wizard.


External Preview Tab

The External Preview Tab

Show only the the working image map when previewing.

When you preview you image map, should you only preview the working document or should the whole document be viewed.


General Tab

The General Tab
Here you find generals settings that not could be placed under another of the other tabs.
Search for both images and map element when opening a new file-
When opening a already existing html file contains more than one image or image map the Select Image Dialog will appear, if this choice not are selected only the image maps in the file will be displayed. By select this item images will also be displayed.
Should fool-prof Usemap be activated.
By select this item you will not be able to enter a Map Username that already exist in the document. By using this choice you will prevent that there will be any problem with the image map.
Show Welcome Screen at startup.
If you want the welcome screen to display each time you start VIM select this item.


Internal Prevew Tab

The Internal Preview Tab
When Preview starts, should the Zoom level se set to 100%
If you want to preview you image map in real size, this choice should be selected. If not selected you will preview the document in the same Zoom level as you worked in.
Should external browser be started when clicking an hotspot
When you are previewing the image map in the internal preview, should your standard web browser be started when clicking an hotspot?
Use Standard tooltip for mouseover and
Use Balloon tooltip for mouseover.
When you are in the internal preview area and you move the mouse over an area, should the tool tip be a standard windows tool tip or should a balloon tool tip be used.


Reset Tab

The Reset tab
If you want to erase all of the settings in the configuration file, click the Reset button . This will also clear the recent files list, and all values will be set to standard values. The next time you run VIM it will look and behave like the first time you ran it.


Look Tab

The Look tab
Here could you select the interface you prefer. By using a standard look and feel the interface will be looking like a standard Windows application. If you want a to use a more cool and great environment select the Windows XP look and feel. If you select this choice you could also set the ruler and the property header color.


Design Color
While you under the Look tab could select the the interface you prefer, you could here select the color you want on many different screen elements.


The Properties Window
After you have created an shape you maybe want to set the figures properties?. Changes to the figure can be done in both wysiwyg and in an text environment. It's in the properties you set the behavior of the shape. By clicking an property an help description will appear on the bottom of the screen.
The Properties
Here are settings that could be find under the standard category. These properties are the most important properties for a shape. if you want the image map to work correctly all this properties should be used
Name | This is the name of the figure, this could be whatever you want, but it have to be unique.
Alt | if you want a tool tips should appear when the user move the mouse over an area, enter the tool tip here.
Href | By entering an url here you could decide where the user should be directed.
Target | Enter the frame name where the loaded document should appear in.
Under the shape category you could find properties that have no affect on the imagemap when running it at an html page. These properties are useful during the design time.
Type | Here you could select what type of shape the figure should be.
Color | You could set color on each figure in the project, this makes it easier when working with many figures.
Locked | This will lock or unlock the figures from it's current position. You could also use the Lock button [image] found in the toolbar.
Under the Coordinates category you could change the figures coordinates, this makes it easier to place the shape exactly where you want it.
The Event Category is where you set the events to each figure, this should only be used by advanced users.
if you manually add a new parameter to the figure or you load an image map containing other properties than already exist in the properties, they will all come under the Custom Category. This category will only become visible when you have more than one parameter not supported by the standard properties window.


Visual Imagemapper design area
Working with shapes can be done several ways in Visual Imagemapper. It can either be done using the wysiwyg design area, or it can be edited in the internal code area.
Working in the Design Area
The fastes and easiest way to edit and create figures are in the Design Area. By using the Design area to design your shapes you will see the exact location of every shape at all time, and this is the absolutely easiest way to use the imagemapper.
Working in the Code Environment
If working in the Design Area isn't enough for you you can switch to the Code Environment by clicking the Code button on bottom of each open image map. In the Design Area you can access the same events as you can in the Design area.


The Toolbar

Visual Imagemapper Toolbar
When you are creating your imagemap, the toolbar is the place where all the function are accessible from. By moving the mouse over the button an description tool tip will appear. If the description not helps you can here find a more comprehensive help on each button.
New | Create a new image map from scratch
Open | Open an existing image map from an document
Save | Save the current map to the active file, if the file not already exist you have to enter the filename.
Cut | Place the selected figure to the clipboard, then it will be deleted from the document
Copy | Copy the selected figure
Paste | Paste the contents of the clipboard into the document.
Delete | Delete the selected figure from the document.
Undo | Change the document back to the state before last change
Redo | Brings the document back to the last change made.
Lock | Lock or unlock the selected figure to the map.
Pointer | Highlights an figure to be edited.
Rectangle | Creates an rectangular shape.
Circle | Creates an circular shape.
Polygon | Creates an irregular shape.
Rotate | Manually rotate the selected hotspot (applies to rectangles and polygons)
Zoom | Zoom out or into the image.
Hotspot Wizard | By clicking this button you will start the Hotspot Wizard
Support Lines | Show support lines around an shape when moving it around.
Hide Figures | Hides the figures on the active document.
Ruler | Displays or hide the documents ruler
Preview | Preview the document into the standard web browser.


Edit Window
If you want to manually edit an figure in Visual Imagemapper, you could either right click an figure in design mode, and then click the Edit Figure on the popup menu. You could also double click a text line the code mode. By doing this the edit window will appear.
In the edit window you could manually edit the code for an figure or the image. Here you could edit the existing code for an figure or you could enter your own code. This features is only recommended for advanced users.


How can I make mouseover effect to an shape

Q: How can I make mouseover effect to an shape.

A: If you want some text to be displayed in the browsers status bar when the user moves the pointer over an area, this could be done using javascript.

In the figures Events category, add this text window.status='Enter mouseover text here'; return true to the OnMouserOver property. If you want the text to disappear when the user moves the pointer outside the shape area, enter this text into the OnMouseOut property window.status=''; return true.


How can I redirect the user when he moves the mouse over an area

Q: How can I redirect the user when he moves the mouse over an area.
A: This is very easy, just enter the text window.open ('Enter hyperlink here') in the OnMouseOver events, you could also put this text on some of the others events you could find in the Event category.


How to copy the imagemap code to the clipboard

How do copy the imagemap code to the clipboard
If you want to copy your code to the clipboard instead of saving it to an file, just select the Edit in the file menu, and then select the choice Export Map to Clipboard, the image map code is now copied to your clipboard.


When I want to save a project, should I save it as VIP or HTML?
If you save as html, you can add it to an existing html document, and upload it to the internet. The VIP format can only be read by Visual Imagemapper. We advice you to save as VIP until you are happy with your imagemap (and want to be able to publish it on the net). When you save as VIP, some settings are saved that normally won't get saved in HTML format..


When I choose background image, can I use animated gifs?
Yes, but only the first image of the animation will be displayed in Visual Imagemapper..


If I purchase a Visual Imagemapper license, how many computers am I allowed to install it on?
If you purchase one license of Visual Imagemapper, you can install it on one computer. If you install it on more than one computer, you're breaking the license agreement.


How do I configure the external browser?
There is no need to configure the external browser. Visual Imagemapper use the standard browser.